import React, { Component } from 'react';
import {
    View, Text, TextInput, TouchableOpacity, Image, StatusBar, SafeAreaView
} from 'react-native';

import MCV from './MCV';
import {arrMood} from './DataHandler';

export default class DiaryReader extends Component {
    constructor(props) {
        super(props);
        const {selectIndex, diaryList} = this.props;
        this.index = selectIndex;
        this.state = {
            diary: diaryList[this.index],
        }
    }

    _next = () => {
        this.index += 1;
        if(this.index >= this.props.diaryList.length) {
            this.index = 0;
        }
        this.setState({
            diary: this.props.diaryList[this.index]
        });
    }

    _previous = () => {
        this.index -= 1;
        if(this.index < 0) {
            this.index = this.props.diaryList.length - 1;
        }
        this.setState({
            diary: this.props.diaryList[this.index]
        });
    }

    render() {
        const {title, time, body, mood} = this.state.diary;
        return (
            <View style={MCV.container}>
                <StatusBar hidden={true} />
                <View style={MCV.firstRow}>
                    <TouchableOpacity onPress={this.props.returnPressed}>
                        <Text style={MCV.middleButton}>
                            返回
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this._previous}>
                        <Text style={MCV.middleButton}>
                            上一篇
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this._next}>
                        <Text style={MCV.middleButton}>
                            下一篇
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={MCV.secondRow}>
                    <Image style={MCV.moodStyle} source={arrMood[mood]}/>
                    <View style={MCV.subViewInReader}>
                        <Text style={MCV.textInReader}>
                            {title}
                        </Text>
                        <Text style={MCV.textInReader}>
                            {time}
                        </Text>
                    </View>
                </View>
                <TextInput style={[MCV.diaryBodyStyle, {color: 'black'}]}
                    multiline={true}
                    editable={false}
                    value={body}
                />
            </View>
        );
    }
}